<template>





    <div style="width: 100%;height: 100%;background:url(https://img.ivsky.com/img/bizhi/pic/201906/27/changbaishan_tianchi-007.jpg) 1600px 800px" >
        <div v-show="login">
            <div style="margin-left: 670px;padding: 20px" >
                <div class="two">
                    <img src="../assets/mylogos.png">
                </div>
            </div>
            <div class="one">
                <div style="padding: 30px">
                    <el-form v-model="emp">
                        <span style="font-size: 34px;">Login</span>
                        <p style="font-size: 18px;margin-top: 40px">Account</p>
                        <el-form-item>
                            <el-input v-model="emp.empPhone"></el-input>
                        </el-form-item>
                        <p style="font-size: 18px;margin-top: 25px">Password
                            <el-link @click="forgotpwd" style="float: right" type="primary">Forgot Password?</el-link>
                        </p>
                        <el-form-item>
                            <el-input v-model="emp.empMima" @keyup.enter.native="logins()"  show-password></el-input>
                        </el-form-item>
                        <p>
                            <el-checkbox v-model="checked">Remember Me</el-checkbox>
                        </p>
                        <p>
                            <el-button @click="logins" type="primary" style="width: 438px">Login</el-button>
                        </p>
                    </el-form>
                </div>
            </div>
        </div>
        <div v-show="forget">
            <div style="margin-left: 670px;padding: 20px">
                <div class="two">
                    <img src="../assets/mylogos.png">
                </div>
            </div>
            <div class="one" style="height: 530px">
                <div style="padding: 30px">
                    <span style="font-size: 34px;">Forgot Password</span>
                    <p style="font-size: 18px;margin-top: 40px">Account</p>
                    <el-input>
                    </el-input>
                    <p style="font-size: 18px;margin-top: 25px">phone</p>
                    <el-input v-model="pwd" style="width:298px"></el-input>

                    <el-button type="primary" style="width: 140px">Send verification</el-button>
                    <p style="font-size: 18px;margin-top: 25px">verification</p>
                    <el-input v-model="pwd"></el-input>
                    <p style="font-size: 10px;color: #8fa1b2">
                        By clicking "Reset Password" We will send reset password to your mobile phone
                    </p>

                    <p>
                        <el-button @click="resetpwd" type="primary" style="width: 438px;margin-top: 20px">Reset Password</el-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "DLogin",
        data() {
            return {
                login:true,//登陆显示
                forget:false,//找回密码显示
                checked:false,
                pwd:'',
                emp:{
                    empPhone:'',
                    empMima:'',
                }
            };
        },
        methods:{

            forgotpwd(){
                this.login=false;
                this.forget=true;
            },
            resetpwd(){
                this.login=true;
                this.forget=false;
            },
            logins(){
                this.$axios.post("http://localhost:8088/come/login",
                    this.qs.stringify({
                        phone:this.emp.empPhone,
                        pwd:this.emp.empMima
                })).then(v=>{
                    var jsonobj= v.data;  // 把JSON字符串解析为javascript对象
                    if(jsonobj=='error') {
                        this.$message.error("用户账号或密码错误！")
                    }
                    if(jsonobj=='out'){
                        this.$message.error("该用户已离职")
                    }
                    if(jsonobj=='stop'){
                        this.$message.error("该用户已停用")
                    }
                    if(jsonobj!=""){
                        this.$store.commit('login',jsonobj.user);//存用户信息
                        localStorage.setItem('city',JSON.stringify(jsonobj.city));//存天气
                        localStorage.setItem('imgpath',jsonobj.user.empImgpath);//存用户头像
                        localStorage.setItem('roleId',jsonobj.user.roleId.roleId);//存用户角色ID
                        this.$router.push('/homepage');

                    }else{
                        this.$message.error('账号或密码错误！！');
                    }
                }).catch(()=>{

                })
            }
        },
        created() {
        }
    }
</script>

<style scoped>
    .one{
        overflow:hidden;
        width: 500px;
        height:450px;
        margin: 0 auto;
        background-color: #F6F6F6;
        position: relative;
        z-index: 99;
    }
    .two{
        width: 110px;
        height:110px;
        border-radius:100px
    }
    .two img{
        width:240px;
        height:240px;
        border-radius:250px;
        margin-top: -45px;
        margin-left: -50px;
    }
</style>